<template>
  <div id="IndexShouye">
    <h1>首页</h1>

    <div class="carousel-container">
      <el-carousel :interval="3000" type="card" height="400px" indicator-position="outside">
        <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
          <div class="carousel-item">
            <img :src="image.src" :alt="image.alt" class="carousel-image">
            <div class="carousel-caption">
              <h3>{{ image.title }}</h3>
              <p>{{ image.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div id="main" style="width: 500px;height: 300px;">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "IndexShouye",
  data() {
    return {
      carouselImages: [
        {
          src: require('@/assets/hU0KDf.jpg'),
          alt: '图片1',
          title: '欢迎来到医疗管理系统',
          description: '专业的医疗信息管理平台'
        },
        {
          src: require('@/assets/hU0yG9.jpg'),
          alt: '图片2',
          title: '城市信息管理',
          description: '便捷的城市信息查询和管理'
        },
        {
          src: require('@/assets/hUB2Wj.jpg'),
          alt: '图片3',
          title: '医生信息管理',
          description: '全面的医生信息管理系统'
        },
        {
          src: require('@/assets/hUBref.jpg'),
          alt: '图片4',
          title: '药品信息管理',
          description: '完善的药品信息管理平台'
        },
        {
          src: require('@/assets/hUDHDP.jpg'),
          alt: '图片5',
          title: '销售信息管理',
          description: '高效的销售信息管理系统'
        },
        {
          src: require('@/assets/hUl7nA.jpg'),
          alt: '图片6',
          title: '材料信息管理',
          description: '专业的材料信息管理平台'
        },
        {
          src: require('@/assets/hUlb7t.jpg'),
          alt: '图片7',
          title: '医保政策管理',
          description: '全面的医保政策管理系统'
        },
        {
          src: require('@/assets/hUlOtf.jpg'),
          alt: '图片8',
          title: '权限信息管理',
          description: '安全的权限信息管理平台'
        },
        {
          src: require('@/assets/hUlH0I.png'),
          alt: '图片9',
          title: '必需材料管理',
          description: '完善的必需材料管理系统'
        },
        {
          src: require('@/assets/hUlLAP.png'),
          alt: '图片10',
          title: '医药公司管理',
          description: '专业的医药公司信息管理'
        }
      ]
    }
  },
  mounted() {


    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ]
        }
      ]
    });
  }
}
</script>

<style>
#IndexShouye {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.carousel-container {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 0 0 8px 8px;
}

.carousel-caption h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: bold;
}

.carousel-caption p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.el-carousel--card .el-carousel__item {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-carousel--card .el-carousel__item.is-active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}


.el-carousel__indicators {
  bottom: 20px;
}

.el-carousel__indicator {
  background-color: rgba(255, 255, 255, 0.5);
}

.el-carousel__indicator.is-active {
  background-color: #409EFF;
}
</style>